前言 :
今天來分享圖片懸浮效果，本來是做遊戲的人物介紹，但後來發現有使用到未授權照片所以就改換成鳥的介紹～順便介紹這個很棒的網站～

Pexels : https://www.pexels.com/zh-TW/license/
/images/emoticon/emoticon07.gif
參考影片 :
https://www.youtube.com/watch?v=-9vp6PyBZdE
語法介紹 :

• white-space : nowrap
• calc()
• :has()
• brightness()
• filter:grayscale()
• grid-gap
• grid-template-columns
• display:grid
• data-text、content : attr(data-text)
• style="--img:url('')"
• text-transform
• ::before、::after
• background:linear-gradient
• -webkit-box-reflect
• :nth-child
  成果圖片 :
  https://ithelp.ithome.com.tw/upload/images/20231019/201608474pN9bkWtvr.png
  示範程式碼 :
  https://codepen.io/ywngjyyj-the-vuer/pen/rNoXgVy---

流程圖 - 學習分析解構 :
https://ithelp.ithome.com.tw/upload/images/20231019/20160847hq641RybmH.png
開始實作 :
在 HTML 中建立名為.container 的容器，內部有 5 個 div 容器，
每個都設定 class="box"，是作為共同設定。
class="one~five"，是作為個別設定不同的樣式。
style="--img:url('')"，